/* *****   1.class——2.获取节点方法——3.开启服务器server——
4   class方法getDate 利用axios获取商品列表信息
4.1 解构赋值获取到的data和status
4.2 判断status和code是否符合，否则返回
4.3 遍历商品信息，并循环添加到页面中   
5   给立即抢购绑定点击事件，点击时判断是否有token，有的话获取商品ID加入购物车并提示加入购物车成功，没有的话携带
    returnUrl跳转到登录界面。
***** */

class List {
  constructor() {
    this.getData();
  }
  //************发送请求获取商品列表信息*********
  async getData() {
    //解构赋值获取响应数据和状态
    let { data, status } = await axios.get("http://localhost:8888/goods/list");
    // console.log(data, status);
    if (status != 200 || data.code != 1) {
      return;
    }
    let html = "";
    data.list.forEach((goods) => {
      // console.log(goods);
      html += `<li class="sk_goods">
        <a href="#"><img src="${goods.img_big_logo}" alt=""></a>
        <h5 class="sk_goods_title">${goods.title}</h5>
        <p class="sk_goods_price"><em>${goods.current_price}</em> <del>${goods.price}</del></p>
        <div class="sk_goods_progress">
          已售<i>${goods.sale_type}</i>
          <div class="bar">
              <div class="bar_in"></div>
          </div>
          剩余<em>${goods.goods_number}</em>件
        </div>
        <a href="#none" class="sk_goods_buy" onclick="List.nowBuy(${goods.goods_id})">立即抢购</a>
        </li>`;
      // console.log(html);

      this.$(".sk_bd ul").innerHTML = html;
    });
  }
  //创建静态方法，点击‘立即购买’时触发
  static nowBuy(goods_id) {
    location.assign(`./proDetail.html?id=${goods_id}`);

    /* //判断是否有token，没有的话跳转登录页面
    let token = localStorage.getItem("token");
    // console.log(token);
    if (!token) location.assign("login.html?returnUrl=./list.html");
    // 获取用户id
    let user_id = localStorage.getItem("user_id");
    // console.log(goods_id, token, user_id);

    //将商品加入购物车
    // 设置请求头编码格式
    axios.defaults.headers["Content-Type"] =
      "application/x-www-form-urlencoded";
    //设置请求头携带token
    axios.defaults.headers.common["authorization"] = token;
    let param = `id=${user_id}&goodsId=${goods_id}`;
    axios
      .post("http://localhost:8888/cart/add", param)
      .then(({ data, status }) => {
        //判断状态
        if (status != 200) {
          layer.msg("加入购物车失败");
          return;
        }
        if (data.code != 1)
          location.assign("./login.html?returnUrl=./list.html");
        // console.log(status, data);
        layer.msg("加入购物车成功");
      }); */
  }

  //获取节点的方法
  $(ele) {
    let res = document.querySelectorAll(ele);
    return res.length == 1 ? res[0] : res;
  }
}
new List();
